<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 11</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<!-- 第二章  Vue 基础语法/2-11 列表循环渲染(1) -->
<script>
    const app = Vue.createApp({
        data() {
            return {
                listArray: ['dell', 'lee', 'teacher'],
                listObject: {
                    firstName: 'dell',
                    lastName: 'lee',
                    job: 'teacher'
                }
            };
        },
        methods: {
            handleClick() {
                // 1. 使用数组的变更函数：push   pop   shift   unshift  splice  reverse   sort
                // this.listArray.push('hello');
                // this.listArray.pop();
                // this.listArray.shift();
                // this.listArray.unshift('hello');
                // this.listArray.reverse();

                // 2. 直接替换数组
                // this.listArray = ['hehe', 'haha']
                // this.listArray = ['bye', 'world'].filter(item => item === 'world')

                // 3. 直接更新数组的内容
                // this.listArray[1] = 'helle'

                //  直接添加对象的内容，也可以自动展示出来
                this.listObject.age = 18;
                this.listObject.sex = "男";
            }
        },
        template: `
        <div 
            v-for="(value,key,index) in listObject" 
            :key="index">
            <div v-if="key!=='lastName'">
                {{value}}---{{key}}
            </div>
        </div>
        <div v-for="item in 6">{{item}}</div>
        <button @click="handleClick">新增</button>
        `
    });
    const vm = app.mount('#root')
</script>